import React from 'react';
import G6 from '@antv/g6';
import { Rect, Text, Circle, Image, Group, createNodeFromReact } from 'g6-react-node';

const Tag = ({ text, color }) => (
    <Rect
        style={{
            stroke: color,
            padding: [5, 10],
            width: 'auto',
            radius: [4],
            margin: [0, 8],
            flex:5 ,
            flexDirection:"row"

        }}
    >

        <Text style={{ stroke: '#2f3e5b', fontSize: 10 }}>{text}</Text>
    </Rect>
);

const Card = ({ cfg }) => {
    const { collapsed = false } = cfg;
    console.log(cfg.attr.title)

    return (
        <Group draggable>
            <Rect
                style={{
                    width: 'auto',
                    height: 100,
                    fill: '#fff',
                    stroke: '#ddd',
                    shadowColor: '#eee',
                    shadowBlur: 30,
                    radius: [8],
                    justifyContent: 'center',
                    padding: [0, 10],

                    next : "inline",
                    flexDirection: 'row',
                }}
                draggable
            >
                <Group>
                <Text
                    style={{
                        fill: '#000',
                        margin: [0, 24],
                        fontSize: 16,
                        fontWeight: 'bold',
                    }}

                >
                    {cfg.attr.title}
                </Text>


                        <Image
                            style={{
                                img: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',
                                width: 50,
                                height: 50,
                                margin: [15, 16],
                                next : "inline",
                                alignContent: 'auto'
                            }}
                        />
                </Group>
                        <Rect style={{ width: 'auto', flexDirection: 'column', padding: [15, 16] }}>
                            <Tag color="#66ccff" text={cfg.attr.qps} />
                            <Tag color="#66ccff" text={cfg.attr.rt} />
                            <Tag color="#66ccff" text={cfg.attr.error} />

                        </Rect>



            </Rect>
        </Group>
    );
};

G6.registerNode('test', createNodeFromReact(Card));